var { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const path = require("path");

module.exports = {
    mode: "development",

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    entry: {
        'index': './entry/index/index.js'
    },

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        // extensions: [".ts", ".tsx"]
        extensions: ['.js', '.jsx', '.tsx', '.css', '.scss', '.less'],
        alias: {
            '@teach_wmg_21': path.join(__dirname, '../21/dist/Index.jsx'),
            "@src": path.join(__dirname, './src')
        }
    },

    module: {
        rules: [

            {
                test: /\.(js|jsx)$/, // 匹配.js文件
                exclude: /node_modules(\\|\/)(?!(@kedacom|teach_wmg_21))/,
                use: 'babel-loader?cacheDirectory=true'
            },

            {
                test: /\.(md|mdx)$/,
                use: ['babel-loader', '@mdx-js/loader']
            },
            // 非ts项目无需这个
            // {
            //     test: /\.ts(x?)$/,
            //     exclude: /node_modules/,
            //     use: [
            //         {
            //             loader: "ts-loader"
            //         }
            //     ]
            // },


            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    }
                ]
            },

            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2
                        }
                    },
                    'postcss-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            implementation: require('sass')
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(eot|ttf|woff|svg|woff2)$/,
                use: 'file-loader'
            },
            {
                test: /\.(png|jpg|ico|gif)$/i,
                loader: require.resolve('url-loader'),
                options: {
                    limit: 8192,
                    name: 'static/imgs/',
                    name: '[name].[hash:7].[ext]'
                },
            },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    // externals: {
    //     "react": "React",
    //     "react-dom": "ReactDOM"
    // },

    devServer: {
        hot: true, // 热替换
        compress: true, // 开启gzipY
        host: 'localhost',
        port: 8088, // 端口
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: `./entry/index/index.html`,
            filename: `index.html`,
            chunks: ['index']
        }),
        // new HtmlWebPackPlugin({
        //     template: `./entry/demo/index.html`,
        //     filename: `demo.html`,
        //     chunks: ['demo']
        // }),
    ]
};